<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="同学你好,同学你好导航,网址导航,自定义网址导航,定制网址导航,同学你好邀请码">
		<meta name="description" content="同学你好是一款高度可定制化的网址导航，可为每个用户提供个性化域名访问的导航页面。独一无二的定制化功能注定成为导航届的一批黑马，你的专属主页。">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta name="baidu_union_verify" content="6205508d44c10962cda3c47d998c7ef2">
		<link rel="icon" href="/favicon.ico">
		<title>同学你好</title>
		<#include "/common/public.html"/>
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
		<link href="/css/collect.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="/css/nav.css" />
		<style>
			.white {
				background: url(/img/bg.png) rgb(255, 255, 255);
				color: rgb(0, 0, 0);
				overflow: hidden;
			}
			.content{display:none;position: fixed;top:0;right:0;bottom: 0;left: 0;overflow-y: auto;background: url(img/bg.png) rgb(255, 255, 255);z-index: 2;}\

			.tool-box li span {
				display: none;
			}

			.tool-box li .tool-boxspan{display:none;z-index: 9999}

			.tool-box li:hover .tool-boxspan{
				display: block;
			}

			.overlay {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0,0,0,0.4);
				z-index: 999;
			}

			li.last-li {
				display: none;
			}
			.tool-content:hover li.last-li{
				display: block;
			}

		</style>
	</head>
	<body class="white">
		<div id="app">
			<#include "/common/header.html"/>
			<div v-show="true" style="height: 100%;">
				<div class="bg">
					<div style="margin: 100px auto;"><span class="siteName">同学你好</span>
						<div style="margin: 10px auto;"></div> 一切都是最好的开始 </div>
					<div class="search">
						<div class="serach">
							<div class="el-row is-justify-center el-row--flex">
								<li class="li-tab"><i class="fa fa-cog fa-spin"></i> 留言板 </li>
								<li class="li-tab active"> 常用
									<div class="trangle "></div>
								</li>
								<li class="li-tab"> 视频
									<div class="trangle "></div>
								</li>
								<li class="li-tab"> 资源
									<div class="trangle "></div>
								</li>
								<li class="li-tab"> 学术
									<div class="trangle "></div>
								</li>
								<li class="li-tab"> 社交
									<div class="trangle "></div>
								</li>
								<li class="li-tab"> 生活
									<div class="trangle "></div>
								</li>
							</div>
							<div class="el-row is-justify-center el-row--flex">
								<li class="li-tab activeEngine"> 百度 </li>
								<li class="li-tab"> 谷歌 </li>
								<li class="li-tab"> 360 </li>
								<li class="li-tab"> Bing </li>
								<li class="li-tab"> 多吉 </li>
								<li class="li-tab"> 搜狗 </li>
							</div><br>
							<div class="el-row is-justify-center el-row--flex">
								<div class="el-col el-col-24 el-col-xs-23 el-col-sm-18 el-col-md-10">
									<div class="el-input el-input-group el-input-group--append el-input--suffix" style="position: relative;">
										<form method="get" action="https://www.baidu.com/s" target="_blank">
											<input type="text" autocomplete="off" name="wd" autofocus="autofocus" placeholder="百度一下,你就知道" class="el-input__inner">
											<div style="position: absolute;top:6px;right:20px;"><button type="submit" style="width: 60px;height: 40px;border: 0;background:transparent;"><span type="text"><i class="fa fa-search"></i></span></button></div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="el-col el-col-24">
						<div class="totop">
							<div style="height: 200px;"></div>
							<div>
								<div>
									<div class="el-col el-col-24">
										<div class="copyright">
											<a target="_blank" rel="nofollow" href="https://support.qq.com/products/106426">意见反馈</a>
											<a target="_blank" rel="nofollow" href="https://support.qq.com/products/106426/blog/11015">免责声明</a>
											<a target="_blank" rel="nofollow" href="https://support.qq.com/products/106426/blog/10953">请作者吃辣条</a>
											<div style="height: 10px;"></div> 友情链接
											<a target="_blank" rel="follow" href="http://www.itbooking.net">同学你好</a>
											<a target="_blank" rel="follow" href="https://www.runningcheese.com/">奔跑中的奶酪</a>
											<a target="_blank" rel="follow" href="https://met.red/">遇见数据仓库</a>
											<a target="_blank" rel="follow" href="https://www.24kdh.cn/">24k导航</a>
											<a target="_blank" rel="follow" href="https://creatorsdaily.com/">创造者日报</a>
											<a target="_blank" rel="follow" href="http://zyplayer.fun/">ZY Player</a>
											<a target="_blank" rel="follow" href="http://www.qyun.vip/">Q云</a>
											<li>
												<a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn/" style="color: grey;">湘ICP备2021019272号</a>
											</li>
                                            <li></li>
											<!--<li>
												<a href="javascript:void(0);" id="settingnav" style="color: grey;">设置导航</a>
											</li>-->
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div v-show="true" class="contentx animate__animated animate__slideInDown">
				<div class="content-body">
					<!--<div class="tool-card today">
						今天是：2021年11月18日 星期四 农历十月十四 ，2021年已经过去了87.95%，要加油哦！
					</div>-->
					<!--<a href="javascript:void(0);" id="closenav" style="color: grey;">关闭</a>-->
					<div class="tool-content" v-for="(collectlist,index) in collectList" :key="collectlist.categoryId">
						<h3 class="tool-cate">{{collectlist.categoryTitle}}</h3>
						<ul class="tool-box">
							<li v-for="(collect,cindex) in collectlist.collectList" :key="collect.id" style="position: relative">
								<a :href="collect.hreflink">
									<dl class="tool-card">
										<dt><img :src="collect.iconlink"
												 :alt="collect.iconlink"> <strong>{{collect.title}}</strong></dt>
										<dd><span class="tool-hits fl"><i class="icon-eye"></i> {{collect.categoryId}} </span><span
												class="fr"><i class="icon-thumbs-up"></i>{{collect.id}}</span></dd>
									</dl>
								</a>
								<span class="tool-boxspan" @click="delcollect(index,cindex)" style="position: absolute;top: -10px;right: 5px"><i class="iconfont icon-shanchu" style="color: red"></i></span>
							</li>
							<li class="last-li">
								<!--prevent清除a链接默认行为-->
								<a href="" @click.prevent="expandAddBox(index)">
									<div class="tool-card ksd-tool-card">
										<span>+</span>
									</div>
								</a>
							</li>
						</ul>
					</div>

				</div>

			</div>

			<transition
					name="custom-classes-transition"
					enter-active-class="animate__animated  animate__fadeInRight"
					leave-active-class="animate__animated  animate__fadeOutRight">
				<div class="ksd-addcollect-box" v-show="expandAddFlag">
					<div>
						{{collect}}
						<p>
							<input type="hidden" v-model="collect.categoryTitle">
							<label class="tit">分类ID</label>
							<select id="categoryId" v-model="optionobj" @change="selectOption">
								<option value="">--请选择分类--</option>
								<option v-bind:value="option" v-for="(option,index) in optionarr">{{option.name}}</option>
							</select>
						</p>
						<p>
							<label class="tit" for="title">标题</label>
							<input type="hidden" v-model="collect.id">
							<input type="text" @keyup.enter="saveCollect" autofocus v-model.trim="collect.title" id="title" placeholder="请输入标题" maxlength="100">
						</p>
						<p>
							<label class="tit" for="iconlink">链接图标</label>
							<input type="text" @keyup.enter="saveCollect" v-model.trim="collect.iconlink" id="iconlink"  placeholder="请输入链接图标" maxlength="400">
						</p>
						<p>
							<label class="tit" for="hreflink">跳转地址</label>
							<input type="text" @keyup.enter="saveCollect" v-model.trim="collect.hreflink" id="hreflink"  placeholder="请输入跳转地址" maxlength="400">
						</p>
						<p>
							<label class="tit" for="sorted">排序</label>
							<input type="text" @keyup.enter="saveCollect" v-model.number="collect.sorted" id="sorted"  placeholder="请输入排序" maxlength="2">
						</p>
						<p>
							<label class="tit">发布状态</label>
							<label><input type="radio" v-model="collect.status" value="1"> 发布</label>
							<label><input type="radio" v-model="collect.status" value="0"> 未发布</label>
						</p>
						<p>
							<button class="savebtn" @click="saveCollect">保存收藏</button>
						</p>
					</div>
				</div>
			</transition>
			<div class="overlay" @click="closeAddBox" v-show="expandAddFlag"></div>


		</div>


		
		<script src="/js/jquery.min.js"></script>
		<script src="/js/vue.global.js"></script>
		<script src="/js/axios.min.js"></script>
		<script src="/js/collect/index.js"></script>
		<script>

		</script>

	</body>

</html>